<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">

		<title>向左侧滑动效果</title>

		<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>

		<style>
			* {
				margin: 0;
				padding: 0;
			}

			img {
				border: 0;
			}

			li {
				list-style: none;
			}

			a {
				text-decoration: none;
			}


			.btn {
				width: 100px;
				height: 30px;
				line-height: 30px;
				border: 1px solid;
				margin: 0 auto;
				margin-top: 100px;
				text-align: center;
				cursor: pointer;
				border-radius: 6px;
			}

			.btn_show {
				width: 100%;
				height: 100%;
				display: none;
			}


			.btn_show_bg {
				width: 100%;
				height: 100%;
				background: #000;
				position: fixed;
				top: 0;
				left: 0;
				opacity: 0.5;
			}

			.btn_show_main {
				width: 300px;
				height: 100%;
				background: #fff;
				position: fixed;
				top: 0;
				right: -300px;
			}

			.btn_show_main_close {
				font-size: 14px;
				width: 100px;
				height: 20px;
				line-height: 20px;
				text-align: center;
				cursor: pointer;
			}

			.div_right0 {
				animation: myfirstss 2s;
				-moz-animation: myfirstss 2s;
				/* Firefox */
				-webkit-animation: myfirstss 2s;
				/* Safari and Chrome */
				-o-animation: myfirstss 2s;
				/* Opera */
				animation-fill-mode: forwards;
			}

			@keyframes myfirstss {
				100% {
					background: red;
					right: 0px;
					top: 0px;
				}
			}

			.div_right {
				animation: myfirsts 2s;
				-moz-animation: myfirsts 2s;
				/* Firefox */
				-webkit-animation: myfirsts 2s;
				/* Safari and Chrome */
				-o-animation: myfirsts 2s;
				/* Opera */
				animation-fill-mode: forwards;
				right: 0px;
			}

			@keyframes myfirsts {
				100% {
					background: blue;
					right: -300px;
					top: 0px;
				}
			}

			.btn_show_main ul li {
				width: 100%;
				height: 20px;
				line-height: 20px;
				text-align: center;
				font-size: 14px;
				margin-bottom: 10px;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="btn">按钮</div>

		<div class="btn_show">
			<div class="btn_show_bg"></div>
			<div class="btn_show_main">
				<div class="btn_show_main_close">我是关闭</div>
				<ul>
					<li>我是1</li>
					<li>我是2</li>
					<li>我是3</li>
					<li>我是4</li>
					<li>我是5</li>
					<li>我是6</li>
					<li>我是7</li>
					<li>我是8</li>
					<li>我是9</li>
					<li>我是10</li>
				</ul>
			</div>
		</div>
	</body>
	<script>
		window.onload = function() {
			$(".btn").click(function() {
				$(".btn_show").show();
				$(".btn_show_bg").show();
				$(".btn_show_main").addClass('div_right0');
				$(".btn_show_main").removeClass('div_right')
			});

			$(".btn_show_main_close").click(function() {
				$(".btn_show_main").addClass('div_right');
				$(".btn_show_main").removeClass('div_right0');
				$(".btn_show_bg").hide(2000);
			});
		};
	</script>
</html>

